<template>
    <div class="am-g upload_wrap">
        <div class="am-u-sm-12">
            <div class="am-btn am-btn-warning">基本信息一</div>
        </div>
        <div class="am-margin-lg">
            <div class="am-u-sm-12 am-margin-vertical">
                <form class="am-form am-scrollable-horizontal">
                    <table class="am-table am-table-bordered am-text-nowrap">
                    <tbody>
                    <tr>
                        <th class="am-form-group">
                            <span class="am-icon-user"> 性别：</span>
                            <label class="am-radio-inline">
                                <input type="radio" name="radio1" value="0" v-model="sex" data-am-ucheck :disabled="!editable"> 男
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" name="radio1" value="1" v-model="sex" data-am-ucheck :disabled="!editable"> 女
                            </label>
                          <label class="am-radio-inline">
                            <input type="radio" name="radio1" value="2" v-model="sex" data-am-ucheck :disabled="!editable"> 不限
                          </label>
                        </th>
                    </tr>
                    <tr>
                        <th class="am-form-group">
                            <span class="am-icon-certificate"> 婚否：</span>
                            <label class="am-radio-inline">
                                <input type="radio" name="radio2" value="0" v-model="maritalStatus" data-am-ucheck :disabled="!editable"> 已婚
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" name="radio2" value="1" v-model="maritalStatus" data-am-ucheck :disabled="!editable"> 未婚
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" name="radio2" value="2" v-model="maritalStatus" data-am-ucheck :disabled="!editable"> 不限
                            </label>
                        </th>
                    </tr>
                    <tr>
                        <th class="am-form-group">
                            <span class="am-icon-child"> 有无孩子：</span>
                            <label class="am-radio-inline">
                                <input type="radio" name="radio3" value="1" v-model="children" data-am-ucheck :disabled="!editable"> 有
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" name="radio3" value="0" v-model="children" data-am-ucheck :disabled="!editable"> 无
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" name="radio3" value="2" v-model="children" data-am-ucheck :disabled="!editable"> 不限
                            </label>
                        </th>
                    </tr>
                    <tr>
                        <th class="am-form-group">
                            <span class="am-icon-home"> 是否有房：</span>
                            <label class="am-radio-inline">
                                <input type="radio" name="radio4" value="1" v-model="house" data-am-ucheck :disabled="!editable"> 有
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" name="radio4" value="0" v-model="house" data-am-ucheck :disabled="!editable"> 无
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" name="radio4" value="2" v-model="house" data-am-ucheck :disabled="!editable"> 不限
                            </label>
                        </th>
                    </tr>
                    <tr>
                        <th class="am-form-group">
                            <span class="am-icon-car"> 是否有车：</span>
                            <label class="am-radio-inline">
                                <input type="radio" name="radio5" value="1" v-model="car" data-am-ucheck :disabled="!editable"> 有
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" name="radio5" value="0" v-model="car" data-am-ucheck :disabled="!editable"> 无
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" name="radio5" value="2" v-model="car" data-am-ucheck :disabled="!editable"> 不限
                            </label>
                        </th>
                    </tr>
                    </tbody>
                    </table>
                </form>
            </div>
        </div>
        <div class="am-u-sm-12">
            <div class="am-btn am-btn-warning">基本信息二</div>
        </div>
        <div class="am-margin">
                <div class="am-u-sm-12">
                    <div class="am-form-group marginTop">
                        <span class="am-icon-user-md"> 年龄：</span>
                    </div>
                </div>
                <div class="am-u-sm-12">
                    <form class="am-form am-scrollable-horizontal">
                        <table class="am-table am-table-bordered am-text-nowrap  am-table-compact">
                        <tbody>
                        <tr v-for="(i,index) in ageList" :key="'age'+index" >
                            <th class="am-form-group">
                                <label class="am-checkbox">
                                    <input type="checkbox" name="age" :value="i.value" v-model="birth" data-am-ucheck :disabled="!editable"> {{i.item}}
                                </label>
                            </th>
                        </tr>
                        </tbody>
                        </table>
                    </form>
                    <hr class="hrHeight6"/>
                </div>
                <div class="am-u-sm-12">
                    <div class="am-form-group marginTop">
                        <span class="am-icon-book"> 学历：</span>
                    </div>
                </div>
                <div class="am-u-sm-12">
                    <form class="am-form am-scrollable-horizontal">
                        <table class="am-table am-table-bordered am-text-nowrap  am-table-compact">
                        <tbody>
                        <tr v-for="(i,index) in educList" :key="'educ'+index" >
                            <th class="am-form-group">
                                <label class="am-checkbox">
                                    <input type="checkbox" name="educ" :value="i.value" v-model="education" data-am-ucheck :disabled="!editable"> {{i.item}}
                                </label>
                            </th>
                        </tr>
                        </tbody>
                        </table>
                    </form>
                    <hr class="hrHeight6"/>
                </div>
                <div class="am-u-sm-12">
                    <div class="am-form-group marginTop">
                        <span class="am-icon-money"> 月收入：</span>
                    </div>
                </div>
                <div class="am-u-sm-12">
                    <form class="am-form am-scrollable-horizontal">
                        <table class="am-table am-table-bordered am-text-nowrap  am-table-compact">
                        <tbody>
                        <tr v-for="(i,index) in moneyList" :key="'money'+index" >
                            <th class="am-form-group">
                                <label class="am-checkbox">
                                    <input type="checkbox" name="money" :value="i.value" v-model="monthlyIncome" data-am-ucheck :disabled="!editable"> {{i.item}}
                                </label>
                            </th>
                        </tr>
                        </tbody>
                        </table>
                    </form>
                    <!-- <hr class="hrHeight6"/> --><br/><br/>
                </div>
                <div class="am-hide">
                    <div class="am-u-sm-12">
                        <div class="am-form-group am-u-sm-8 marginTop">
                            <span class="am-icon-map-marker"> 选择地域：</span>
                        </div>
                        <div class="am-u-sm-4 marginTop">
                            <label class="am-checkbox-inline">
                                <input type="checkbox"  value="" data-am-ucheck v-model="province_checkall"> 全选(按省份)
                            </label>
                        </div>
                    </div>
                    <div class="am-u-sm-12" id="province_wrap">
                        <form class="am-form am-scrollable-horizontal">
                            <table class="am-table am-table-bordered am-text-nowrap">
                            <tbody>
                            <tr v-for="(i,index) in provinceList" :key="'province'+index" >
                                <th class="am-form-group" :id="'province_checkall'+index" data-checkall='0'>
                                    {{i.area}}
                                    <label class="am-checkbox-inline textGray">
                                        <input type="checkbox" value="" data-am-ucheck @click="handleCheckall1(index)"> 全选
                                    </label>
                                    <label class="am-checkbox-inline textLarge" v-for="(j,num) in i.province" :key="'city1_'+num">
                                        <input type="checkbox"  :value="j.value" data-am-ucheck> {{j.item}}
                                    </label>
                                </th>
                            </tr>
                            </tbody>
                            </table>
                        </form>
                    </div>
                    <div class="am-u-sm-12">
                        <div class="am-form-group am-u-sm-8 marginTop">
                            <span class="am-icon-building"> 选择城市：</span>
                        </div>
                        <div class="am-u-sm-4 marginTop">
                            <label class="am-checkbox-inline">
                                <input type="checkbox"  value="" data-am-ucheck v-model="city_checkall"> 全选(按城市)
                            </label>
                        </div>
                    </div>
                    <div class="am-u-sm-12" id="city_wrap">
                        <div class="city_wrap city-wrap1" v-for="(i,index) in cityList" :key="'city'+index" :id="'city_checkall'+index" data-checkall='0' >
                            <div class="am-form-group">
                                {{i.rank}}
                                <label class="am-checkbox-inline textGray">
                                    <input type="checkbox" value="" data-am-ucheck @click="handleCheckall2(index)">全选(共{{i.city.length}}个)
                                </label>
                            </div>
                            <label class="am-checkbox-inline textLarge widthDivide" v-for="(j,num) in i.city" :key="'city2_'+num">
                                <input type="checkbox"  :value="j.value" data-am-ucheck> {{j.item}}
                            </label>
                        </div>
                        <div class="city_wrap">
                            其他城市
                            <label class="am-checkbox-inline textGray">
                                <input type="checkbox" value="" id="other" data-am-ucheck>
                            </label>
                        </div>
                    </div>
                </div>
        </div>
        <div class="am-margin textCenter">
            <div @click="handleCancel()" class="am-btn am-btn-warning am-btn-primary borderRadius4">取消</div>
            <div @click="handleSubmit()" class="am-btn am-btn-warning am-btn-primary borderRadius4">提交</div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
import axios from 'axios'
import {url} from '../../../static/config'
export default {
  data () {
    return {
      ageList: [
        {item: '15岁以下', value: '0'},
        {item: '16-20岁', value: '1'},
        {item: '21-25岁', value: '2'},
        {item: '26-30岁', value: '3'},
        {item: '31-35岁', value: '4'},
        {item: '36-40岁', value: '5'},
        {item: '41-45岁', value: '6'},
        {item: '46-50岁', value: '7'},
        {item: '51岁以上', value: '8'}
      ],
      educList: [
        {item: '初中', value: '1'},
        {item: '高中', value: '2'},
        {item: '专科', value: '3'},
        {item: '本科', value: '4'},
        {item: '本科以上', value: '5'},
        {item: '不限', value: '8'}
      ],
      moneyList: [
        {item: '3000元以下', value: '1'},
        {item: '3001元-6000元', value: '2'},
        {item: '6001元-9000元', value: '3'},
        {item: '9001元-12000元', value: '4'},
        {item: '12001元-15000元', value: '5'},
        {item: '15001元-20000元', value: '6'},
        {item: '20000元以上', value: '7'},
        {item: '不限', value: '8'}
      ],
      provinceList: [
        {area: '华北地区',
          province: [
            {item: '北京', value: 'beijing'},
            {item: '天津', value: 'tianjin'},
            {item: '山西', value: 'shanxi'},
            {item: '河北', value: 'hebei'},
            {item: '内蒙', value: 'neimeng'}
          ] },
        {area: '东北地区',
          province: [
            {item: '辽宁', value: 'liaoning'},
            {item: '吉林', value: 'jilin'},
            {item: '黑龙江', value: 'heilongjiang'}
          ] },
        {area: '华东地区',
          province: [
            {item: '上海', value: 'shanghai'},
            {item: '山东', value: 'shandong'},
            {item: '江苏', value: 'jiangsu'},
            {item: '浙江', value: 'zhejiang'},
            {item: '福建', value: 'fujian'},
            {item: '安徽', value: 'anhui'}
          ] },
        {area: '华中地区',
          province: [
            {item: '河南', value: 'henan'},
            {item: '湖北', value: 'hubei'},
            {item: '湖南', value: 'hunan'},
            {item: '江西', value: 'jiangxi'}
          ] },
        {area: '华南地区',
          province: [
            {item: '广东', value: 'guangdong'},
            {item: '广西', value: 'guangxi'},
            {item: '海南', value: 'hainan'}
          ] },
        {area: '西南地区',
          province: [
            {item: '四川', value: 'sichuan'},
            {item: '云南', value: 'yunnan'},
            {item: '重庆', value: 'chongqing'},
            {item: '贵州', value: 'guizhou'},
            {item: '西藏', value: 'xizang'}
          ] },
        {area: '西北地区',
          province: [
            {item: '陕西', value: 'shanxi'},
            {item: '甘肃', value: 'gansu'},
            {item: '宁夏', value: 'ningxia'},
            {item: '青海', value: 'qinghai'},
            {item: '新疆', value: 'xinjiang'}
          ] },
        {area: '港澳台地区',
          province: [
            {item: '香港', value: 'xianggang'},
            {item: '澳门', value: 'aomen'},
            {item: '台湾', value: 'taiwan'}
          ] },
        {area: '海外地区',
          province: [
          ] }
      ],
      cityList: [
        {rank: '一线城市',
          city: [
            {item: '北京', value: 'beijing'},
            {item: '上海', value: 'shanghai'},
            {item: '广州', value: 'guangzhou'},
            {item: '深圳', value: 'shenzhen'}
          ]},
        {rank: '新一线城市',
          city: [
            {item: '成都', value: 'chengdu'},
            {item: '杭州', value: 'hangzhou'},
            {item: '重庆', value: 'chongqing'},
            {item: '武汉', value: 'wuhan'},
            {item: '苏州', value: 'suzhou'},
            {item: '西安', value: 'xian'},
            {item: '天津', value: 'tianjin'},
            {item: '南京', value: 'nanjing'},
            {item: '郑州', value: 'zhengzhou'},
            {item: '长沙', value: 'changsha'},
            {item: '沈阳', value: 'shenyang'},
            {item: '青岛', value: 'qingdao'},
            {item: '宁波', value: 'ningbo'},
            {item: '东莞', value: 'dongguan'},
            {item: '无锡', value: 'wuxi'}
          ]},
        {rank: '二线城市',
          city: [
            {item: '昆明', value: 'kunming'},
            {item: '大连', value: 'dalian'},
            {item: '厦门', value: 'xiamen'},
            {item: '合肥', value: 'hefei'},
            {item: '佛山', value: 'foshan'},
            {item: '福州', value: 'fuzhou'},
            {item: '哈尔滨', value: 'haerbin'},
            {item: '济南', value: 'jinan'},
            {item: '温州', value: 'wenzhou'},
            {item: '长春', value: 'changchun'},
            {item: '石家庄', value: 'shijiazhuang'},
            {item: '常州', value: 'changzhou'},
            {item: '泉州', value: 'quanzhou'},
            {item: '南宁', value: 'nanning'},
            {item: '贵阳', value: 'guiyang'},
            {item: '南昌', value: 'nanchang'},
            {item: '南通', value: 'nantong'},
            {item: '金华', value: 'jinhua'},
            {item: '徐州', value: 'xuzhou'},
            {item: '太原', value: 'taiyuan'},
            {item: '嘉兴', value: 'jiaxing'},
            {item: '烟台', value: 'yantai'},
            {item: '惠州', value: 'huizhou'},
            {item: '保定', value: 'baoding'},
            {item: '台州', value: 'taizhou'},
            {item: '中山', value: 'zhongshan'},
            {item: '绍兴', value: 'shaoxing'},
            {item: '乌鲁木齐', value: 'wulumuqi'},
            {item: '淮坊', value: 'huaifang'},
            {item: '兰州', value: 'lanzhou'}
          ]}
      ],
      province_checkall: false,
      city_checkall: false,
      slideNav: this.$route.query.upload || 'adalready',
      resultDate: [],
      id: '',
      adId: '',
      sex: '', // 用户性别
      maritalStatus: '', // 婚姻状况
      children: '', // 子女状况
      house: '', // 是否有房
      car: '', // 是否有车
      birth: '', // 年龄
      monthlyIncome: '', // 收入
      education: '', // 学历
      editable: this.$route.query.editable// 是否可编辑
    }
  },
  created () {
    var _this = this
    _this.id = _this.$route.query.id
    var adId = encodeURIComponent(_this.$route.query.adId)
    _this.adId = adId
    console.log('编辑选中', _this.$route.query.adId, adId)
    axios.post(url + '/web-adv/getAdConditionByAdId?adId=' + adId)
      .then(function (res) {
        // 已投放（查看/编辑）按钮，投放页面 选中按钮，查询投放限制接口
        var data = JSON.parse(res.data)
        _this.resultDate = data
        // console.log('返回了', data)
        _this.sex = data.result.sex || '2'
        _this.maritalStatus = data.result.maritalStatus || '2'
        _this.children = data.result.children || '2'
        _this.house = data.result.house || '2'
        _this.car = data.result.car || '2'
        _this.birth = data.result.birth || [_this.ageList[0].value]
        _this.education = data.result.education || [_this.educList[_this.educList.length - 1].value]
        _this.monthlyIncome = data.result.monthlyIncome || [_this.moneyList[_this.moneyList.length - 1].value]
      })
  },
  methods: {
    handleCancel () {
      this.$router.go(-1)
    },
    handleSubmit () {
    //   console.log('性别', this.sex, '婚否', this.maritalStatus, '孩子', this.children, '房子', this.house, '车', this.car, '年龄', this.birth, '学历', this.education, '收入', this.monthlyIncome)
      var _this = this
      var params = _this.slideNav === 'adalready'
        ? '/web-adv/setAdPlaceCondition?id=' + _this.id + '&adId=' + _this.adId + '&sex=' + _this.sex + '&maritalStatus=' + _this.maritalStatus + '&children=' + _this.children + '&house=' + _this.house + '&car=' + _this.car + '&birth=' + _this.birth + '&education=' + _this.education + '&monthlyIncome=' + _this.monthlyIncome
        : '/web-adv/setAdPlaceCondition?adId=' + _this.adId + '&sex=' + _this.sex + '&maritalStatus=' + _this.maritalStatus + '&children=' + _this.children + '&house=' + _this.house + '&car=' + _this.car + '&birth=' + _this.birth + '&education=' + _this.education + '&monthlyIncome=' + _this.monthlyIncome
      axios.post(url + params)
        .then(function (res) {
        // 修改提交、选中-提交 对应接口
          var data = JSON.parse(res.data)
          if (data.result) {
            _this.$router.go(-1)
          }
        })
    },
    // 地域中各地区‘全选’
    handleCheckall1 (item) {
      var checkall = $('#province_checkall' + item).attr('data-checkall')// 默认为0:未全选
      if (checkall === '0') {
        $('#province_checkall' + item).find('.textLarge input').uCheck('check')
        $('#province_checkall' + item).attr('data-checkall', '1')
      } else {
        $('#province_checkall' + item).find('.textLarge input').uCheck('uncheck')
        $('#province_checkall' + item).attr('data-checkall', '0')
      }
    },
    // 城市中‘全选’
    handleCheckall2 (item) {
      var checkall = $('#city_checkall' + item).attr('data-checkall')// 默认为0:未全选
      if (checkall === '0') {
        $('#city_checkall' + item).find('.textLarge input').uCheck('check')
        $('#city_checkall' + item).attr('data-checkall', '1')
      } else {
        $('#city_checkall' + item).find('.textLarge input').uCheck('uncheck')
        $('#city_checkall' + item).attr('data-checkall', '0')
      }
    }
  },
  watch: {
    // 地域总全选
    province_checkall (val, old) {
      if (val) {
        $('#province_wrap input').uCheck('check')// 选中所有
        $('#province_wrap .am-form-group').attr('data-checkall', '1')// 各地区属性设置
      } else {
        $('#province_wrap input').uCheck('uncheck')
        $('#province_wrap .am-form-group').attr('data-checkall', '0')
      }
    },
    // 城市总全选
    city_checkall (val, old) {
      if (val) {
        $('#city_wrap input').uCheck('check')// 选中所有
        $('#city_wrap .city-wrap1').attr('data-checkall', '1')// 城市各级别属性设置
      } else {
        $('#city_wrap input').uCheck('uncheck')
        $('#city_wrap .city-wrap1').attr('data-checkall', '0')
      }
    }
  }
}
</script>
